<template>
    <div>
        <lbt></lbt>
        <div class="container clearfix">
            <!--标题-->
            <div class="contact-title">

            </div>

            <!--联系方式等-->
            <div class="contact-info row clearfix">
                <!--公司地址-->
                <div class="contact-address col-md-4 col-sm-12">
                    <img src="../../assets/images/contact/address_img.png" alt="">
                </div>
                <!--联系电话-->
                <div class="contact-tel col-md-4 col-sm-12">
                    <img src="../../assets/images/contact/telphonenum_img.png" alt="">
                </div>
                <!--公司邮箱-->
                <div class="contact-email col-md-4 col-sm-12">
                    <img src="../../assets/images/contact/email_img.png" alt="">
                </div>
            </div>

            <!--大地图板块-->
            <div id="map" class="">
                <!--洪崖洞-->
                <div class="hyd">
                    <img src="../../assets/images/contact/hyd.png" alt="">
                </div>
                <!--地图-->
                <div id="allmap"></div>
                <!--人物-->
                <div class="person">
                    <img src="../../assets/images/contact/person.png" alt="">
                </div>
            </div>

            <!--表单大框-->
            <div class="form-box">
                <!--获取资讯标题-->
                <p class="get-contact-title hidden-sm hidden-xs">想获取更多资讯？快给蜀帅留言吧！</p>
                <p class="get-contact-title-small hidden-lg hidden-md">想获取更多资讯？</p>
                <p class="get-contact-title-small hidden-md hidden-lg">快给蜀帅留言吧！</p>
                <!--表单-->
                <div class="get-form">
                    <Form :model="formItem" :rules="ruleValidate" ref="userForm">
                        <!--姓名-->
                        <FormItem label="" prop="username">
                            <Input v-model="formItem.username" placeholder="请输入您的姓名"></Input>
                        </FormItem>
                        <!--性别-->
                        <FormItem label="" prop="usergender">
                            <RadioGroup v-model="formItem.usergender">
                                <Radio label="male">先生</Radio>
                                <Radio label="female">女士</Radio>
                            </RadioGroup>
                        </FormItem>
                        <!--联系方式-->
                        <FormItem label="" prop="usertel">
                            <Input v-model="formItem.usertel" placeholder="请输入您的手机号码"></Input>
                        </FormItem>
                        <!--地区-->
                        <FormItem label="" prop="usercity">
                            <Select v-model="formItem.usercity">
                                <!--<Select v-model="formItem.select">-->
                                <Option v-for="(index,k) in citySeltect" :key=k :value="index.enname">{{ index.cnname
                                    }}
                                </Option>
                                <!--<Option value="beijing">北京</Option>-->
                                <!--<Option value="shanghai">上海</Option>-->
                                <!--<Option value="hangzhou">杭州</Option>-->
                            </Select>
                        </FormItem>
                        <!--留言-->
                        <FormItem label="" prop="textarea">
                            <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                                   placeholder="输入你的留言，如：支持实地考察吗？"></Input>
                        </FormItem>
                        <!--提交按钮-->
                        <FormItem inline=false>
                            <Button type="primary" @click="handleSubmit('userForm')">立即发送给我们</Button>
                        </FormItem>
                    </Form>
                </div>
            </div>
        </div>

        <commonFooter></commonFooter>
    </div>
</template>

<script>
    import lbt from "@/components/lbt/biglbt"
    import commonFooter from "@/components/footerCom/commonFooter"

    export default {
        data() {
            // 用户名验证
            const usernamePass = (rule, value, callback) => {
                if (value.replace(/(^\s*)|(\s*$)/g, " ") == " ") {
                    return callback(new Error("请输入您的姓名"))
                } else if (value.length > 6) {
                    return callback(new Error("请输入正确的姓名"))
                } else {
                    callback()
                }
            };
            // 用户号码验证
            const usertelPass = (rule, value, callback) => {
                if (!(/^1(3|4|5|7|8|6)\d{9}$/.test(value))) {
                    return callback(new Error("号码输入有误"))
                } else {
                    callback()
                }
            };
            return {
                // 表单
                formItem: {
                    username: '',
                    usertel: '',
                    usergender: 'male',
                    usercity: '',
                    textarea: '',
                },
                // 城市选择数组
                citySeltect: [
                    {cnname: "北京", enname: "beijing"},
                    {cnname: "上海", enname: "shanghai"},
                    {cnname: "杭州", enname: "hangzhou"},
                ],

                ruleValidate: {
                    username: [
                        {validator: usernamePass, trigger: 'blur'}
                    ],
                    usertel: [
                        {validator: usertelPass, trigger: 'blur'}
                    ],
                }
            }
        },
        methods: {
            // 百度地图API功能
            contactMapInit() {
                var map = new BMap.Map("allmap");    // 创建Map实例
                map.centerAndZoom(new BMap.Point(120.219628, 30.186925), 18);  // 初始化地图,设置中心点坐标和地图级别
                //添加地图类型控件
                map.addControl(new BMap.MapTypeControl({
                    mapTypes: [
                        BMAP_NORMAL_MAP,
                        BMAP_HYBRID_MAP
                    ]
                }));
                map.setCurrentCity("杭州");          // 设置地图显示的城市 此项是必须设置的
                // map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                var point = new BMap.Point(120.219628, 30.186925);
                var marker = new BMap.Marker(point);        // 创建标注
                map.addOverlay(marker);                     // 将标注添加到地图中
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

                // var opts = {
                //     width: 100,     // 信息窗口宽度
                //     height: 20,     // 信息窗口高度
                //     title: "味捷餐饮", // 信息窗口标题
                // }
                // var infoWindow = new BMap.InfoWindow("", opts);  // 创建信息窗口对象
                // map.openInfoWindow(infoWindow, point); //开启信息窗口
            },
            // 表单提交
            handleSubmit(domName) {
                // console.log(this.$refs[domName]);
                this.$refs[domName].validate(v => {
                    if (v) {
                        // console.log("ok");
                        // this.$Message.success('Success!');
                        // 在此处发送ajax请求
                    } else {
                        // console.log("no");‘
                        // 提示用户没有输入完整的信息
                        this.$Message.error('请输入您的基本信息哦，不然我们无法联系到您呢！');
                    }
                })
            }
        },
        mounted() {
            this.contactMapInit()
        },
        components: {
            lbt,
            commonFooter
        }


    }
</script>

<style lang="less">
    /*标题  pc*/
    .contact-title {
        margin: 0 auto;
        width: 154px;
        height: 70px;
        background: url("../../assets/images/contact/contact.png") no-repeat center center;
        background-size: cover;
    }

    /*不同屏幕下  上下外边距不同*/
    @media (min-width: 992px) {
        .contact-title {
            margin: 70px auto;
        }
    }

    @media (max-width: 768px) {
        .contact-title {
            margin: 20px auto;
        }
    }

    /*联系方式等*/
    .contact-info {
        /*width: 1032px;*/
        margin: 0;

        > div {
            height: 100%;
        }

        @media (max-width: 768px) {
            > div {
                margin-top: 10px;

                img {
                    display: block;
                    /*width: 200px;*/
                    /*height: 60px;*/
                }
            }
        }

        .contact-address {
            /*background-color: #66afe9;*/
        }

        /*联系电话*/

        .contact-tel {
            /*background-color: #e9d764;*/
        }

        /*公司邮箱*/

        .contact-email {
            /*background-color: #2ee97d;*/
        }
    }

    /*地图板块*/
    /* 地图模块 */
    #map {
        height: 731px;
        //background-color: pink;
        background-color: #fdfcf5;
        margin: 100px auto 100px auto;
        position: relative;

        /* 洪崖洞 */

        .hyd {
            width: 830px;
            height: 790px;
            //background-color: #007aff;
            position: absolute;
            top: -65px;
            left: 0;
            z-index: 0;

            img {
                width: 100%;
                height: 100%;
            }
        }

        #allmap {
            width: 883px;
            height: 603px;
            //background-color: red;
            position: absolute;
            top: 56px;
            left: 183px;
        }

        /* 人物 */

        .person {
            width: 300px;
            height: 400px;
            //background-color: red;
            position: absolute;
            bottom: -20px;
            right: -50px;
            z-index: 10;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    /*表单大盒子*/
    @media (max-width: 768px) {
        .form-box {
            /*min-width: 270px;*/
            /*max-width: 500px;*/
            margin-top: 20px;

            p.get-contact-title-small {
                text-align: left;
                font-size: 18px;
                color: #000;
                line-height: 1.5em;
                padding-left: 30px;
                margin-bottom: 10px;
            }
        }
    }

    .form-box {
        /*background-color: #66afe9;*/
        position: relative;

        /*右边人物*/

        @media (min-width: 992px) {
            &:after {
                content: "";
                position: absolute;
                right: -60px;
                bottom: -80px;
                width: 417px;
                height: 417px;
                background: url("../../assets/images/contact/botton_person.png") no-repeat center center;
                background-size: cover;

            }
        }

        /*获取资讯标题*/

        p.get-contact-title {
            margin-bottom: 60px;
            text-align: center;
            font-size: 30px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 27px;
            letter-spacing: 0px;
            color: #333333;
        }

        /*表单*/

        @media (min-width: 992px) {
            .get-form {
                margin-left: 134px;
                width: 601px;
                height: 412px;

                .ivu-form-item {
                    margin-top: 10px;
                    display: inline-block !important;
                }
            }
        }

        @media (max-width: 768px) {
            /*width: 271px;*/
            .get-form {
                .ivu-form-item {
                    display: block !important;
                }
            }
        }

        .get-form {

            /*background-color: pink;*/

            position: relative;

            /*伪元素放置二维码*/

            @media (min-width: 992px) {
                &:after {
                    content: "";
                    position: absolute;
                    width: 161px;
                    height: 168px;
                    bottom: 15px;
                    right: 0;
                    background: url("../../assets/images/contact/jiadeerweima.png");
                    background-size: cover;
                }
            }

            input,
            div.ivu-select-selection,
            textarea {
                &:hover,
                &:focus {
                    border-color: #a30808 !important;
                }
            }
        }

        /*大屏幕的样式*/
        @media (min-width: 992px) {
            .ivu-form-item {
                margin-left: 40px;

                &:nth-of-type(1) {
                    .ivu-form-item-content {
                        width: 349px;
                        height: 60px;

                        input {
                            height: 60px;
                        }
                    }
                }

                &:nth-of-type(2) {
                    .ivu-form-item-content {
                        width: 152px;
                        height: 60px;
                    }

                    /*性别选框的外边距*/

                    .ivu-radio-wrapper {
                        &:nth-of-type(2) {
                            margin-left: 40px;
                        }
                    }
                }

                &:nth-of-type(3) {
                    .ivu-form-item-content {
                        width: 349px;
                        height: 60px;

                        input {
                            height: 60px;
                        }
                    }
                }

                &:nth-of-type(4) {
                    width: 168px;

                    .ivu-select-selection {
                        height: 60px;
                        width: 168px;

                        .ivu-select-placeholder {
                            height: 60px;
                            line-height: 60px;
                            padding-left: 30px;
                        }
                    }

                    .ivu-select-selected-value {
                        height: 60px;
                        line-height: 60px;
                        padding-left: 30px;
                    }
                }

                &:nth-of-type(5) {
                    .ivu-form-item-content {
                        width: 349px;
                        height: 226px;


                        textarea {
                            height: 226px !important;
                            max-height: 226px !important;
                        }
                    }
                }

                &:nth-of-type(6) {
                    padding-left: 90px;
                }
            }
        }

        /*通用样式*/

        .ivu-form-item {
            &:nth-of-type(1) {
                margin-bottom: 10px;
            }

            &:nth-of-type(2) {
                /*margin-top: 23px;*/
                margin-bottom: 10px;

                .ivu-form-item-content {
                    .ivu-radio-group {
                        margin-top: 10px;
                    }
                }

                .ivu-radio-checked .ivu-radio-inner {
                    border-color: #a30808;

                    &:after {
                        background-color: #a30808;
                    }
                }
            }

            &:nth-of-type(3) {

            }

            &:nth-of-type(4) {


                .ivu-form-item-content {


                    /*选择框选项大小*/

                    .ivu-select-item {
                        padding-top: 15px;
                        padding-bottom: 15px;
                    }


                }

                .ivu-select-item-selected,
                .ivu-select-item-selected:hover {
                    color: #a30808;
                }

                /* 下拉框 */

                .ivu-select-dropdown {

                    /*下拉框列表*/

                    .ivu-select-dropdown-list {

                        /*min-width: 168px !important;*/

                        .ivu-select-item {
                            padding-left: 30px;
                        }
                    }
                }
            }

            &:nth-of-type(5) {

            }

            &:nth-of-type(6) {
                /*margin-top: 40px;*/

                display: block;

                .ivu-form-item-content {
                    button {
                        border: 2px solid #a30808;
                        background-color: transparent;
                        color: #a30808;
                        font-weight: bold;
                        letter-spacing: 0.01em;
                        transition: all 0.5s;

                        &:hover {
                            background-color: #a30808;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }

    /*!*表单  移动*!*/
    /*.form-box-small {*/
    /*background-color: #fff;*/
    /*margin-top: 20px;*/
    /*!*性别单选框*!*/

    /*.mint-radiolist-label {*/
    /*!*选中圆点的颜色*!*/

    /*.mint-radio-input:checked + .mint-radio-core {*/
    /*background-color: #a30808 !important;*/
    /*border-color: #a30808 !important;*/
    /*}*/

    /*.mint-radio-label {*/
    /*!*更改选中后的文字的颜色*!*/

    /*}*/
    /*}*/
    /*}*/

</style>